import {
    trigger,
    state,
    style,
    query,
    animate,
    group,
    stagger,
    keyframes,
    transition,
} from '@angular/animations';

export const openCloed = trigger('openClose',[
    state('open',style({
        height: '100px',
        opacity: 1,
        backgroundColor: '#fad3cf'
    })),
    state('closed',style({
        height: '20px',
        opacity: 0.3,
        backgroundColor: '#a696c8'
    })),
    transition('* => closed',[
        animate('1s')
    ]),
    transition('* => open',[
        animate('0.3s')
    ])
])

export const flyInOut = trigger('flyInOut',[
    state('in', style({
        transform: 'translateX(0)',
    })),
    transition(':enter',[   // 相当于 void => *
        style({
            transform: 'translateX(-100%)'
        }),
        animate(100)
    ]),
    transition(':leave',[   // 相当于 * => void
        animate(100,style({
            transform: 'translateX(100%)'
        }))
    ])
])

export const insertRemove = trigger('insertRemove', [
    transition(':enter', [
        // 进场前的样式
        style({ 
            opacity: 0,
            transform: 'translateX(-100%)'
        }),
        // animate style() 里面定义的是进场后目标样式
        animate('0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55)', style({ 
            opacity: 1,
            transform: 'translateX(0)'
        })),
    ]),
    transition(':leave', [
        animate('0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55)', style({ 
            opacity: 0,
            transform: 'translateX(100%)'
        }))
    ])
])

// 使用数值变化来进行转场
export const slider = trigger('slider', [
    transition(":increment", group([
        query(':enter', [
            style({
                left: '100%'
            }),
            animate('0.5s ease-out', style('*'))
        ]),
        query(':leave', [
            animate('0.5s ease-out', style({
                left: '-100%'
            }))
        ])
    ])),
    transition(":decrement", group([
        query(':enter', [
            style({
                left: '-100%'
            }),
            animate('0.5s ease-out', style('*'))
        ]),
        query(':leave', [
            animate('0.5s ease-out', style({
                left: '100%'
            }))
        ])
    ])),
])


export const mykeyframes = trigger('mykeyframes',[
    state('open', style({
        height: '200px',
        opacity: 1,
        backgroundColor: 'yellow'
    })),
    state('close', style({
        height: '100px',
        opacity: 0.5,
        backgroundColor: 'green'
    })),
    transition('* => *', [
        animate('3s', keyframes([
            style({ opacity: 0.1, offset: 0.1,}),
            style({ opacity: 0.6, offset: 0.2 }),
            style({ opacity: 1,   offset: 0.5 }),
            style({ opacity: 0.2, offset: 0.7, height: '*' })
        ]))
    ])
])